<template>
  <div class="search-suggestion">
    <!-- 把点击的搜索建议，传给父组件，需要用它来得到搜索的结果 -->
    <van-cell v-for="(item,index) in suggestions" :key="index" icon="search"
      @click="$emit('search',item)">
      <!-- 根据输入的内容而显示的搜索建议 item-->
      <span slot="title" v-html="highlight(item)"></span>
    </van-cell>

  </div>
</template>

<script>
import { getSearchSuggestions } from '@/api/search'
// 从lodash中引入debounce，防抖优化
import { debounce } from 'lodash'
export default {
  name: 'SearchSuggestion',
  components: {},
  props: {
    searchText: { // 接受父组件传过来的输入框的值
      type: String,
      required: true
    }
  },
  data () {
    return {
      suggestions: [] // 联想建议数据列表
    }
  },
  computed: {},
  watch: {
    searchText: { // 当它发生变化时，发起请求更新搜索建议
      // handler (val) {
      //   this.loadSearchSuggestions(val)
      // },//防抖优化
      handler: debounce(function (val) { this.loadSearchSuggestions(val) }, 300),
      // 首次监视触发
      immediate: true // 该回调将会在侦听开始之后被立即调用
    }
  },
  created () { },
  mounted () { },
  methods: {
    async loadSearchSuggestions (val) { // 获取搜索建议
      try {
        const { data } = await getSearchSuggestions(val)
        this.suggestions = data.data.options
      } catch (err) {
        this.$toast('获取失败')
      }
    },
    highlight (item) {
      // item是根据搜索框的值，发起请求得到的每一个搜索建议，匹备下使每个搜索建议
      // 里面包含着搜索框的值高亮
      const highlightStr = `<span class="active">${this.searchText}</span>`
      //    RegExp 正则表达式构造函数
      //    参数1：匹配模式字符串，它会根据这个字符串创建正则对象
      //    参数2：匹配模式，要写到字符串中
      const res = new RegExp(this.searchText, 'gi')
      // 在每一个item里找下有没有和res(需要替换的内容)相同的，有的话就替换成highlightStr。
      if (item) {
        return item.replace(res, highlightStr)
      }
    }
  }
}
</script>

<style scoped lang="less">
.search-suggestion {
  /deep/ span.active {
    color: #3296fa;
  }
}
</style>
